<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>5.0 listen attribute</title>
    <script src="../static/vue.min.js"></script>
    <script src="../static/jquery.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    <!--使用watch实现计数器-->
    <p>计数器：{{counter}}</p><br>
    <button @click="counter++">点击</button>
</div>
<hr>
<div id="compute">
    <!--实现千米与米之间的转换-->
    千米：<input type="text" v-model="kilometers">
    米：<input type="text" v-model="meters">
</div>
<script>
    var compute=new Vue({
        el:"#compute",
        data:{
            kilometers:0,
            meters:0
        },
        methods:{

        },
        computed:{

        },
        watch:{
            kilometers:function(newVal){
                this.kilometers=newVal;
                this.meters=newVal*1000;
            },
            meters:function (newVal) {
                this.kilometers=newVal/1000;
                this.meters=newVal;
            }
        }
    });
    //方法二
    /*compute.$watch('kilometers',function (newValue,oldValue) {
       this.meters=newValue*1000;
    });*/
    var vm=new Vue({
        el:"#app",
        data:{
            counter:1
        }
    });
    //$watch是一个实例方法
    vm.$watch('counter',function (nval,oval) {
        //将在counter发送改变后调用
        alert('计数器值的变化：'+oval+'变为'+nval+'!');
    })
</script>
</body>
</html>